<template>
  <!--
  action:提交到服务器的地址
  file-list：显示的文件列表，格式是对象数组
  list-type：文件列表类型
  on-remove：移除时的钩子
  on-preview:图片预览时的钩子
 -->
  <div class="upload-img">
    <el-upload
      accept="image/png, image/jpeg, image/gif"
      :class="{ disabled: value }"
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :http-request="handleUpload"
    >
      <!-- + 号图标 -->
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图片预览弹框 -->
    <el-dialog title="预览" :visible="isShow" @close="isShow = false">
      <img :src="value" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  name: 'UploadImg',
  props: {
    // 接收父传子的value属性(头像地址)
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    fileList: {
      get () {
        return this.value ? [{ url: this.value }] : []
      },
      set () { }
    }
  },
  methods: {
    // 文件移除时的钩子
    handleRemove () {
      // 需要把value清空，
      // 子传父，触发input事件，并传递空字符串
      this.$emit('input', '')
    },
    // 图片预览时的钩子
    handlePreview () {
      this.isShow = true
    },
    // 上传
    handleUpload ({ file }) {
      // file:选择的图片文件对象
      // 把选择的图片对象发至腾讯云服务器
      // 实例化COS
      const cos = new COS({
        SecretId: 'AKIDZyGPNDPTN8lIkpkW8YlurqeENK9kAAh4',
        SecretKey: 'EXiwzmOwMY9Zr7B2oU2B8wZ1Kbij8e2F'
      })
      // 调用方法上传
      cos.putObject({
        Bucket: 'tiankong-1317090661', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-beijing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
      }, (err, data) => {
        console.log(data)
        if (err) {
          return this.$message.success('上传失败')
        }
        // 拿到上传成功的图片地址，同步到父组件中
        this.$emit('input', `https://${data.Location}`)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 146px;
  height: 146px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload:hover {
  border-color: #409eff;
}
.el-icon-plus {
  font-size: 60px;
  color: #8c939d;
  text-align: center;
}
.disabled ::v-deep {
  .el-upload {
    display: none;
  }
}
</style>
